<template>
  <el-form
    :model="addEditForm"
    ref="addEditForm"
    label-width="105px"
    label-position="left"
    class="pg-shaohuo-person-add-edit-identity">
    <el-dialog
      :title="`${type}开通城市`"
      :before-close="beforeDialogClose"
      :visible.sync="dialogVisible"
      width="50%">
      <!-- 表单主题
      -------------------------- -->
      <el-form-item
        label="所属省份"
        prop="province"
        :rules="{ required: true, message: '所属省份不能为空', trigger: 'blur' }">
        <el-select 
          v-model="addEditForm.province"
          @visible-change="provinceVisibleChange"
          @change="provinceChange"
          :loading="!hasAllProvinceList"
          placeholder="选择省份">
          <el-option 
            v-for="item in provinceList"
            :key="item.region_id"
            :label="item.name"
            :value="item.region_id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="城市名称"
        prop="city"
        :rules="{ required: true, message: '城市名称不能为空', trigger: 'blur' }">
        <el-select 
          v-model="addEditForm.city"
          @visible-change="cityVisibleChange"
          :disabled="!addEditForm.province"
          :loading="!hasAllCityList"
          placeholder="选择城市">
          <el-option 
            v-for="item in cityList"
            :key="item.region_id"
            :label="item.name"
            :value="item.region_id"></el-option>
        </el-select>
      </el-form-item>
    
      <el-form-item 
        label="通用价格"
        prop="price"
        :rules="[
          { required: true, message: '请输入通用价格', trigger: 'blur' },
          { type: 'number', message: '通用价格必须为数字值', trigger: 'blur'}
        ]">
        <el-input v-model.number="addEditForm.price"
          step="0.01"
          placeholder="请输入通用价格"></el-input>
      </el-form-item>
      
      <!-- 底部按钮区
      -------------------------- -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary"
          @click="submitForm"
          :loading="loadingBtn === '确定'">确 定</el-button>
      </span>
    </el-dialog>
  </el-form>
</template>

<script>
import { ShaohuoPriceService } from 'services/Api'
import {
  btnLoadingMixin,
  formAddEditMixin,
  dialogCoreMixin
} from 'services/Public'
import { mapState } from 'vuex'

export default {
  name: 'PgTypeAddtype',
  mixins: [
    btnLoadingMixin,
    formAddEditMixin,
    dialogCoreMixin
  ],
  data () {
    return {
      addEditForm: {
        price: '',
        province: '',
        city: ''
      },
      provinceList: null, // 省份列表
      cityList: null, // 城市列表
      hasAllProvinceList: false, // 是否已获取所有省份列表
      hasAllCityList: false // 是否已获取所有城市列表
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    // 获取省列表参数
    getAllProvinceParam () { return { acc_id: this.acc_id } },
    // 获取城市列表参数
    getCityAreaByIdParam () {
      return {
        acc_id: this.acc_id,
        id: this.addEditForm.province
      }
    },
    // 添加参数
    addParam () {
      return {
        acc_id: this.acc_id,
        p_id: this.addEditForm.province,
        c_id: this.addEditForm.city,
        price: String(this.addEditForm.price)
      }
    },
    // 修改参数
    alterParam () {
      return {
        acc_id: this.acc_id,
        id: this.editData.id,
        p_id: this.addEditForm.province,
        c_id: this.addEditForm.city,
        price: String(this.addEditForm.price)
      }
    }
  },
  methods: {
    // 关闭弹窗前重置表单
    beforeDialogClose (done) {
      if (done) done()
      this.isEditing = false
      this.resetForm()
      this.addEditForm = {
        price: '',
        province: '',
        city: ''
      }
    },
    // formAddEditMixin需要 - 编辑时将传入的源数据写入当前表单
    editDataHandler (v) {
      this.addEditForm.price = Number(v.price) || 0
      this.addEditForm.province = v.province_id
      this.addEditForm.city = v.city_id
      if (!this.hasAllProvinceList) this.provinceList = [{ region_id: v.province_id, name: v.province_name }]
      if (!this.hasAllCityList) this.cityList = [{ region_id: v.city_id, name: v.city_name }]
    },
    // formAddEditMixin需要 - 提交成功后的操作
    afterSubmitSuccess () {
      this.dialogComplete()
    },
    // 省份下拉框出现/隐藏时触发
    provinceVisibleChange (boo) {
      // 出现时判断provinceList是否已获取，没有则调用接口获取
      if (boo && !this.hasAllProvinceList) this.getAllProvinceApi()
    },
    // 省份选择改变时
    provinceChange () {
      this.addEditForm.city = ''
      this.cityList = null
      this.hasAllCityList = false
    },
    // 城市下拉框出现/隐藏时触发
    cityVisibleChange (boo) {
      // 出现时判断cityList是否已获取，没有则调用接口获取
      if (boo && !this.hasAllCityList) this.getCityByIdApi()
    },
    // 添加新的捎货类型接口
    currentAddApi () {
      return ShaohuoPriceService.addFreight(this.addParam)
    },
    // 编辑捎货类型接口
    currentEditApi () {
      return ShaohuoPriceService.updateFreight(this.alterParam)
    },
    // 获取省份列表接口
    async getAllProvinceApi () {
      const [ err, res ] = await ShaohuoPriceService.getAllProvince(this.getAllProvinceParam)
      if (err) return this.$message.error(err.message || '获取失败')
      this.provinceList = res
      this.hasAllProvinceList = true
    },
    // 获取城市列表接口
    async getCityByIdApi () {
      const [ err, res ] = await ShaohuoPriceService.getCityAreaById(this.getCityAreaByIdParam)
      if (err) return this.$message.error(err.message || '获取失败')
      this.cityList = res
      this.hasAllCityList = true
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(shaohuo-person-add-edit-identity) {
  .el-form-item__content > .el-input,
  .el-form-item__content > .el-select {
    width: 80%;
  }
  @include e(delete) {
    padding-left: $--padding-base;
  }
}
</style>
